<template>
  <div  class="p16 flex-column-null-between container" style="padding: 24px;overflow: auto;height: calc(100vh - 170px)">
    <el-form ref="from" :model="yeardays" >
      <el-row style="padding-left: 10px">
        <el-col :span="8" class="bg_gray">
          <el-form-item label="选择年度" prop="eventType" >
            <el-select v-model="year" style="width: 55%" filterable>
              <el-option @click.native="getyearday()"
                         v-for="(item, index) in yearlist"
                         :key="index"
                         :label="item"
                         :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="bg_gray">
          <span style="color: #ffffff">{{yesno}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="padding: 10px" class="bg_gray" v-for="(items,index) in yeardays" :key="index">
          <div id="calendar"  >
            <!-- 年份 月份 -->
            <div class="month">
              <ul>
                <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
                <li class="arrow" style="width: 60px"></li>
                <li class="year-month" :style="{color:(new Date().getMonth()+1==items.currentMonth?'#409EFF':'#9D9D9D')}" >
                  <span class="choose-year">{{ year }}年{{ items.currentMonth }}月</span>
                </li>
                <li v-if="(new Date().getMonth()+1<=items.currentMonth && new Date().getFullYear() <= year) || new Date().getFullYear() < year" class="arrow" style="width: 60px;color: #409EFF;" @click="pickYear(items)">
                  设置
                </li>
                <li v-if="new Date().getMonth()+1>items.currentMonth" class="arrow" style="width: 60px;color: #409EFF;">

                </li>
              </ul>
            </div>
            <!-- 星期 -->
            <ul class="weekdays">
              <li>一</li>
              <li>二</li>
              <li>三</li>
              <li>四</li>
              <li>五</li>
              <li >六</li>
              <li >日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
              <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
              <li  v-for="dayobject in items.days" style="position: relative;border-bottom: 0.1px solid rgb(226 226 226);border-right:0.1px solid rgb(226 226 226)">
                <span v-if="dayobject.ifrest==='休'" style="position: absolute;right: 1px;top: 1px;color: red;opacity: 0.7;font-size: 10px">{{ dayobject.ifrest }}</span>
                <span v-if="dayobject.ifrest==='班'" style="position: absolute;right: 1px;top: 1px;color: #2b9af3;opacity: 0.7;font-size: 10px">{{ dayobject.ifrest }}</span>
                <!--本月-->
                <!--如果不是本月  改变类名加灰色-->

                <span v-if="dayobject.day.getMonth()+1!== items.currentMonth" class="other-month" style="font-size: 12px">{{ dayobject.day.getDate() }}</span>

                <!--如果是本月  还需要判断是不是这一天-->
                <span v-else>
                  <!--今天  同年同月同日-->
                    <span v-if="dayobject.day.getMonth() === items.currentMonth" >{{ dayobject.day.getDate() }}</span>
                        <span v-else style="font-size: 12px">{{ dayobject.day.getDate() }}</span>
                    </span>

              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <calendarEidt v-if="calendarEidtbool" ref="calendarEidt" @success="refreshHoliday"/>
  </div>
</template>

<script>
import {findAllHolidayConfig} from '@/api/holiday';
import calendarEidt from './calendarEidt';
export default {
  name: "fworkday",
  components: { calendarEidt },
  data() {
    return {
      currentDay: 1,
      currentMonth: 1,
      currentYear: new Date().getFullYear(),
      currentWeek: 1,
      days: [],
      yeardays:[],
      year:0,
      yearlist:[2019,2020,2021,2022],
      selectcalend:[],
      calendarEidtbool:false,
      yesno:".",
      holidays:{
        "2025-09-06":true
      }

    };
  },
  created: function() {  //在vue初始化时调用
    this.getyear();
    this.refreshHoliday();
    // this.getyearday();
  },
  methods:{
    async refreshHoliday(){
      let param = {
        "year":this.year
      }
      let ret = await findAllHolidayConfig(param);
      this.holidays = ret.data;
      this.getyearday();
    },
    formatDateV1(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getyearday: function() {
      this.yeardays=[];
      for (let i = 1; i <= 12; i++) {
        this.days=[];
        this.initData(this.formatDate(this.year,i,1));
        this.yeardays.push({
          currentMonth:i,
          days:this.days
        });
      }
    },
    initData: function(cur) {
      var leftcount=0; //存放剩余数量
      var date;
      if (cur) {
        date = new Date(cur);
      } else {
        var now=new Date();
        var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
        d.setDate(35);
        date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek === 0) {
        this.currentWeek = 7;
      }
      var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        var d = new Date(str);
        d.setDate(d.getDate() - i);
        var dayobject={}; //用一个对象包装Date对象  以便为以后预定功能添加属性
        dayobject.day=d;
        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 35 - this.currentWeek; i++) {
        var d = new Date(str);
        d.setDate(d.getDate() + i);
        var dayobject={};
        dayobject.day=d;
        this.days.push(dayobject);
      }
      for(let dayobject of this.days){
        //判断是否节假日 是休还是班
        let holidayFlag = this.holidays[this.formatDateV1(dayobject.day)];
        if(dayobject.day.getDay()===0||dayobject.day.getDay()===6 || holidayFlag){
          dayobject["ifrest"]="休";
        }else{
          dayobject["ifrest"]="班";
        }
        if(holidayFlag != null && holidayFlag === false){
          dayobject["ifrest"]="班";
        }
      }
    },
    getyear: function() {
      this.year=new Date().getFullYear();
      for (let i = 1999; i < 2052; i++) {
        this.yearlist.push(i);
      }
    },
    pickPre: function(year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year , month , 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
    },
    pickNext: function(year, month) {
      var d = new Date(this.formatDate(year , month , 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
    },


    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year,month,day){
      var y = year;
      var m = month;
      if(m<10) m = "0" + m;
      var d = day;
      if(d<10) d = "0" + d;
      return y+"-"+m+"-"+d
    },
    pickYear: function(items) {
      this.calendarEidtbool = true;
      this.selectcalend=items.days;
      items.year=this.year;
      this.$nextTick(() => {
        this.$refs.calendarEidt.init(items);
      });
    },
    //修改日历返回
    calendarupdate(value){
      //this.selectcalend=value;
      for (let i = 0; i < this.selectcalend.length; i++) {
        this.selectcalend[i].ifrest=value[i].ifrest
      }
      this.yesno=this.yesno==="."?"。":".";
    }
  }
}
</script>

<style src="../css/index.scss" lang="scss"></style>
<style>


ul {
  list-style-type: none;
}

body {
  font-family: Verdana, sans-serif;
}
#calendar{

  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
}
.month {
  width: 100%;
  background: #ffffff;
}

.month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.year-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}


.choose-year {
  padding-left: 20px;
  padding-right: 20px;
}

.choose-month {
  text-align: center;
  font-size: 1.5rem;
}

.arrow {
  text-align: right;


}

.arrow:hover {
  background: rgba(100, 2, 12, 0.1);
}

.month ul li {
  color: #9D9D9D;
  font-size: 13px;
  text-transform: uppercase;
  padding: 10px;
}

.weekdays {
  margin: 0;
  padding: 6px 0;
  background-color: #409eff;
  display: flex;
  flex-wrap: wrap;
  color: #FFFFFF;
  justify-content: space-around;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
  font-size: 15px;
}

.days {
  padding: 0;
  background: #FFFFFF;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 0.5rem;
  color: #000;
}

.days li .active {
  padding: 6px 10px;
  border-radius: 50%;
  background: #00B8EC;
  color: #fff;
}

.days li .other-month {
  padding: 5px;
  color: gainsboro;
}

.days li:hover {
  background: #e1e1e1;
}
</style>
